<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Messaging</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="messaging__header">
        <img src="assets/logo.svg" alt="Logo" class="logo">
        <img src="assets/james.jpg" alt="James" class="profile">
    </div>
    <div class="messaging__highlights">
        <div class="highlight">
            <img src="assets/lovely.svg" alt="Chat" class="icon">
            Close Friends
        </div>
        <div class="highlight">
            <img src="assets/video.svg" alt="Video" class="icon">
            Video Calls
        </div>
        <div class="highlight">
            <img src="assets/videoadd.svg" alt="Video Add" class="icon">
            Received Media
        </div>
    </div>
    <div class="messaging__block">
        <h3>Online</h3>
        <div class="messaging__avatars">
            <div class="profile__wrapper">
                <img src="assets/james.jpg" alt="James" class="profile">
                <div class="profile__status"></div>
            </div>
            <div class="profile__wrapper">
                <img src="assets/liliya.jpg" alt="Liliya" class="profile">
                <div class="profile__status"></div>
            </div>
            <div class="profile__wrapper">
                <img src="assets/melissa.jpg" alt="Melissa" class="profile">
                <div class="profile__status"></div>
            </div>
            <div class="profile__wrapper">
                <img src="assets/alex.jpg" alt="Alex" class="profile">
                <div class="profile__status"></div>
            </div>
            <div class="profile__wrapper">
                <img src="assets/anna.jpg" alt="Anna" class="profile">
                <div class="profile__status"></div>
            </div>
            <div class="profile__wrapper">
                <img src="assets/jerome.jpg" alt="Jerome" class="profile">
                <div class="profile__status"></div>
            </div>
        </div>
    </div>
    <div class="messaging__block">
        <h3>Recent</h3>
        <div class="messaging">
            <div class="message">
                <div class="message__header">
                    <div class="message__title">
                        <div class="profile__wrapper">
                            <img src="assets/jerome.jpg" alt="Jerome" class="profile">
                            <div class="profile__status"></div>
                        </div>
                        <h4>Jerome</h4>
                    </div>
                    <time class="message__time" datetime="2024-12-08T06:31:42Z">
                        Mon, 12:12 PM
                    </time>
                </div>
                <div class="message__content">
                    <p>Can I get that marketing report please? </p>
                </div>
            </div>
            <div class="message">
                <div class="message__header">
                    <div class="message__title">
                        <div class="profile__wrapper">
                            <img src="assets/anna.jpg" alt="Anna" class="profile">
                            <div class="profile__status"></div>
                        </div>
                        <h4>Anna</h4>
                    </div>
                    <time class="message__time" datetime="2024-12-08T06:31:42Z">
                        Mon, 12:44 PM
                    </time>
                </div>
                <div class="message__content">
                    <p>I am on it! 🚀</p>
                </div>
            </div>
            <div class="message">
                <div class="message__header">
                    <div class="message__title">
                        <div class="profile__wrapper">
                            <img src="assets/melissa.jpg" alt="Melissa" class="profile">
                            <div class="profile__status"></div>
                        </div>
                        <h4>Melissa</h4>
                    </div>
                    <time class="message__time" datetime="2024-12-08T06:31:42Z">
                        Mon, 12:12 PM
                    </time>
                </div>
                <div class="message__content">
                    <p>Hello Cathy</p>
                </div>
            </div>
            <div class="message">
                <div class="message__header">
                    <div class="message__title">
                        <div class="profile__wrapper">
                            <img src="assets/jerome.jpg" alt="Jerome" class="profile">
                            <div class="profile__status"></div>
                        </div>
                        <h4>Jerome</h4>
                    </div>
                    <time class="message__time" datetime="2024-12-08T06:31:42Z">
                        Mon, 12:12 PM
                    </time>
                </div>
                <div class="message__content">
                    <p>Hi everyone!</p>
                </div>
            </div>
            <!-- <div class="messaging__message">
                <div class="profile__wrapper">
                    <img src="assets/james.jpg" alt="Devon" class="profile">
                    <div class="profile__status"></div>
                </div>
                <div class="message__content">
                    <h4>Devon Lane</h4>
                    <p>You: Sent a Photo</p>
                </div>
                <time datetime="2024-12-08T06:31:42Z">
                    Mon, 12:12 PM
                </time>
            </div>
            <div class="messaging__message">
                <div class="profile__wrapper">
                    <img src="assets/liliya.jpg" alt="Lilia" class="profile">
                    <div class="profile__status"></div>
                </div>
                <div class="message__content">
                    <h4>Esther Howard</h4>
                    <p>Hello Cathy!</p>
                </div>
                <time>

                </time>
            </div>
            <div class="messaging__message">
                <div class="profile__wrapper">
                    <img src="assets/anna.jpg" alt="Anna" class="profile">
                    <div class="profile__status"></div>
                </div>
                <div class="message__content">
                    <h4>Anna Karinina</h4>
                    <p>You: Works for me!🔥</p>
                </div>
            </div> -->
        </div>
    </div>

</html>